<template>
  <div class="mod-config">
    <el-card class="box-card search-input" shadow="never">
      <el-form label-width="120px"  size="mini" :model="dataForm" @keyup.enter.native="findPage()">
        <el-row>
          <el-col :span="6">
            <el-form-item label="全局参数键名：">
              <el-input v-model="dataForm.sysKey" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="全局参数键值：">
              <el-input v-model="dataForm.sysVal" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配置分类："  >
              <cy-select :list="sysTypes"  v-model="dataForm.sysType"></cy-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-col :span="24" style="text-align: center;">
          <el-form-item>
            <el-button type="primary" @click="$refs.CyTable.query(dataForm)">查询</el-button>
            <el-button @click="reset('dataForm')">重置</el-button>
            <el-button type="primary" @click="showEdit">创建全局参数</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>

    <cy-table
      v-loading="loading"
      url="/api/v1/broadcast/sysConfigInfo"
      :max-height="500"
      :highlightCurrentRow="true"
      operationWidth="300"
      :totalSize="totalSize"
      :columns="filterColumns"
      :showDetailOperation="false"
      :showEditOperation="true"
      :showDeleteOperation="true"
      @handleDelete="handleDelete"
      @handleEdit="handleEdit"
      @findPage="findPage"
      ref="CyTable"
    >
    </cy-table>
    <el-dialog
      width="50%"
      :title="operation?'创建全局参数':'编辑全局参数'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      @close="editCancel">
      <el-row v-loading="addLoading">
        <el-form label-width="120px" ref="editDataForm" size="mini" :rules="rules" :model="editDataForm">
          <el-col :span="24"  hidden>
            <el-form-item label="id：" prop="">
              <el-input v-model="editDataForm.id"  hidden></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参数键名：" prop="">
              <el-input v-model="editDataForm.sysKey"  clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="参数键值：" prop="">
              <el-input v-model="editDataForm.sysVal"  clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="配置分类：" prop="">
              <el-input v-model="editDataForm.sysType"  clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注：" prop="">
              <el-input v-model="editDataForm.remark"  clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" style="text-align: center;">
            <el-button size="small" type="primary" @click="dataFormSubmit('save')">保存</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
  import CyTable from "./component/CyTable";
  import CySelect from "./component/CySelect";
  export default {
    components: {
      CyTable,
      CySelect
    },
    data() {
      return {
        detailData: {
          liveInfos: {
            rows: []
          }
        },
        loading: false,
        moreBtnDisable: true,
        addLoading: false,
        dataForm: {},
        columns: [],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageRequest2: {
          pageNum: 1,
          pageSize: 10
        },
        totalSize2: 0,
        totalSize: 0,
        operation: true, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        countNumForm: {
          allShopNum: '',
          onlineNum: '',
          offlineNum: ''
        },
        editDataForm: {
          squareCover: '',
          homeCover: '',
          mainCover: '',
          spreadBill: ''
        },
        sysTypes:[{label:'全部'}],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        exportConfirmFlag: false,
        dataListSelections: [],
        invoiceUpdateVisible: true,
        rules: {},
      }
    },
    mounted: function () {
      this.selectChange();
      this.columns = [
        {prop: "id", label: "参数编号", minWidth: 120},
        {prop: "sysKey", label: "参数键名", minWidth: 120},
        {prop: "sysVal", label: "参数键值", minWidth: 120},
        {prop: "sysType", label: "配置分类", minWidth: 120},
        {prop: "remark", label: "备注", minWidth: 120, formatter: this.statusVal},
      ];
      let temp = [];
      this.columns.forEach(function (key, val) {
        temp.push(key);
      });
      this.filterColumns = temp;
    },
    methods: {
      refreshPageRequest2: function (pageNum) {
        this.pageRequest2.pageNum = pageNum;
        this.findPageSysConfigList()
      },
      handleSizeChange2: function (pageSize) {
        this.pageRequest2.pageSize = pageSize;
        this.pageRequest2.pageNum = 1;
        this.findPageSysConfigList()
      },
      defaultVal(row, column, cellValue, index) {
        //默认值 0
        if (cellValue == null || cellValue == '') {
          return 0;
        }
        return cellValue;
      },
      // 获取数据列表
      findPage() {
        this.$refs.CyTable.findPage(this.dataForm);
      },
      findPageByIsTop(selVal) {
        this.dataForm.isTop = selVal;
        this.findPage()
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.findPage()
      },
      // 当前页
      currentChangeHandle(val) {

        this.pageIndex = val
        this.findPage()
      },
      // 多选
      selectionChangeHandle(val) {

        this.dataListSelections = val
        if (this.dataListSelections.length > 0) {
          this.moreBtnDisable = false
        } else {
          this.moreBtnDisable = true
        }
      },
      getPageAnchorLiveInfo(label) {
        this.label= label;
        this.handleSizeChange2();
      },
      query() {
        this.$refs.CyTable.query(this.dataForm)
      },
      //重置
      reset(formName) {
        this.dataForm = {};
        this.$refs.CyTable.resetForm(this.dataForm);
      },
      //查询列表
      findPageSysConfigList() {
        let this_ = this;
        let pageNum = this.pageRequest2.pageNum;
        let pageSize = this.pageRequest2.pageSize;
        let detailSysConfigList = {"sysKey":this_.dataForm.sysKey,"sysVal":this_.dataForm.sysVal,"sysType":this_.dataForm.sysType,"pageSize": pageSize, "pageNum": pageNum};
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/sysConfigInfo',
          method: 'get',
          params: detailSysConfigList
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this_.detailData.liveInfos.rows = data.data.rows;
            this.totalSize2 = data.data.total;
            this_.$forceUpdate();
          } else {
            this_.dataList = []
            this_.totalPage = 0
          }
          this_.dataListLoading = false
        });
      },
      // 删除
      handleDelete: function (params) {
        let ids = params.params;
        let delDataForm = [];
        ids.forEach(val => {
          delDataForm.push(val)
        })
        if (delDataForm.length > 0) {
          this.loading = true;
          let this_ = this;
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/deleteSysConfig',
            method: 'post',
            data: delDataForm
          }).then(result => {
            let data = result.data;
            if (data.code === '0') {
              this_.$refs.CyTable.findPage(this_.dataForm)
              this_.$forceUpdate();
              this.$message({message: "操作成功", type: "success"});
            }
            this.loading = false;
          })
        } else {
          this.$message({message: "请选择需要删除的数据", type: "info"});
        }

      },
      // 编辑取消
      editCancel() {
        this.dialogVisible = false
        this.editDataForm = {
          homeCover: '',
          mainCover: '',
          squareCover: '',
          spreadBill: ''
        }
      },
      // 新增提交
      dataFormSubmit(type) {
        let this_ = this;
        this.$refs['editDataForm'].validate((valid) => {
          if (valid) {
            this.$confirm("确认操作吗？", "提示", {}).then(() => {
              this.addLoading = true;
              this.utils.request.liveRequest({
                url: '/api/v1/broadcast/saveOrUpdateSysConfig',
                method: 'Post',
                params: this.editDataForm
              }).then(result => {
                let data = result.data;
                if (data.code === '0') {
                  this.saveObjectId = data.data;
                  this_.editCancel();
                  this_.$refs.CyTable.findPage(this_.dataForm)
                  this_.$forceUpdate();
                  if (type == 'save') {
                    this_.$message({message: "全局参数保存成功", type: "success"});
                  } else if (type == 'release') {
                    this_.releaseVisible = true
                  }
                } else {
                  this.$message.error(data.msg)
                }
                this.addLoading = false;
              })
            })
          } else {
            return false;
          }
        });
      },
      // 显示自定义界面
      handleCustom: function (params) {
        this.dialogVisible = true;
        this.operation = false;
        this.dataForm = Object.assign({}, params.row);
        this.$nextTick(() => {
          if (this.$refs['dataForm'] !== undefined) {
            this.$refs['dataForm'].clearValidate();
          }
        });
      },
      showEdit() {
        this.operation = true;
        this.dialogVisible = true;
      },
      // 显示编辑界面
      handleEdit: function (params) {

        this.showEdit();
        this.operation = false;
        let number = {
          id: params.row.id
        }
        let this_ = this
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/detail',
          method: 'get',
          params: number
        }).then(result => {
          let data = result.data
          this_.editDataForm = data.data
          this_.$nextTick(() => {
            if (this_.$refs['editDataForm'] !== undefined) {
              this_.$refs['editDataForm'].clearValidate();
            }
          });
        })
      },
      // 下拉
      selectChange() {
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/sysConfigTypes',
          method: 'get'
        }).then(result => {
          let data = result.data
          data.data.forEach(val => {
            this.sysTypes.push({label: val.sysType,value:val.sysType})
          })
        })
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
